<!-- 校园代理消息订阅 -->
<template>
	<view class="container" v-if="loadEnd">
		<view class="container-header">建议您在订阅授权窗口点选“总是允许”选框，以便正常收到消息提醒，订阅按钮上的数字表示订阅消息可发送的次数。</view>
		<view class="container-main">
			<view class="main-item flex align-items-center">
				<view class="item-info flex-item">
					<view class="info-title text-ellipsis">抢单员申请通知</view>
					<view class="info-subtitle text-ellipsis">用户提交申请向校园代理发送提醒</view>
				</view>
				<view class="item-btn" @click="subscribes()">
					<view class="btn" style="background: #FBAB7E;">订阅</view>
					<view class="point" v-if="parseInt(subscribeCount) > 0">{{subscribeCount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ikz from '@/pages/Common/tools.js';
	export default {
		data() {
			return {
				// 加载完成
				loadEnd: false,
				// 是否订阅 
				subscribeCount: 0,
				subscribeId:''
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.getSubscribe(() => {
				uni.hideLoading()
				this.loadEnd = true
			})
			this.subscribeMessage()
		},
		onPullDownRefresh() {
			this.getSubscribe(() => {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			// 获取订阅数量
			getSubscribe(fn) {
				var path = '/xyb/agent/subscribe_count';
				var data = {}
				ikz.get(path,data,(res)=>{
				  if (fn) fn()
				  if(res.data.code){
				   this.subscribeCount = res.data.data.subscribe_count
				  }else{
				    uni.showModal({
				      title: '提示',
				      content: res.data.msg,
				      showCancel: false,
				      success: function(res) {}
				    });
				  }
				})
			},
			// 订阅消息 
			subscribeMessage() {
				var path = '/xyb/wechat_mini_push/template_id_list';
				var data = {
				  
				}
				ikz.post(path,data,(res)=>{
				  if(res.data.code){
				    this.subscribeId = res.data.data.application_status_notification;
					console.log("值是",res.data.data.application_status_notification);
				  }else{
				    uni.showModal({
				      title: '提示',
				      content: res.data.msg,
				      showCancel: false,
				      success: function(res) {}
				    });
				  }
				})
				
			},
			// 订阅
			subscribes(){
				var temp_id = [
				   this.subscribeId ,
				]
				//订阅消息 
				var that = this;
				uni.requestSubscribeMessage({
				  tmplIds: temp_id,
				  success(res) {
				      that.submitSubscribe();
				  },
				  fail(res) {
					  console.log("错误原因",res);
				    if(res.errCode == 20004){
				      uni.showModal({
				        title: '提示',
				        content: '请前往设置打开接受通知',
				        confirmText: '确定',
				        success(res) {
						}
				      })
					
				    }else{
				      uni.showModal({
				        title: '提示',
				        content: '未订阅消息，无法接收到订单通知',
				        confirmText: '确定',
				        success(res) {
						}
				      })
					 
				    }
				    
				  }
				})
			},
			// 提交订阅消息 
			submitSubscribe() {
				var path = '/xyb/agent/submit_subscribe';
				var data = {}
				ikz.post(path,data,(res)=>{
				  if(res.data.code){
					uni.showToast({
						title:"订阅成功",
						icon:"none"
					})
					this.getSubscribe()
				  }else{
				    uni.showModal({
				      title: '提示',
				      content: res.data.msg,
				      showCancel: false,
				      success: function(res) {}
				    });
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}
	.container {
		
		.container-header {
			color: #F6F7FB;
			font-size: 24rpx;
			line-height: 34rpx;
			padding: 32rpx;
			background: #333333;
			position: sticky;
			top: 0;
			z-index: 99;
		}

		.container-main {
			padding: 32rpx;

			.main-item {
				margin-top: 32rpx;
				border-radius: 16rpx;
				background: #ffffff;
				padding: 32rpx;

				&:first-child {
					margin-top: 0;
				}

				.item-info {
					.info-title {
						color: #5A5B6E;
						font-size: 32rpx;
						font-weight: 600;
						line-height: 44rpx;
					}

					.info-subtitle {
						margin-top: 24rpx;
						color: #999999;
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}

				.item-btn {
					margin-left: 24rpx;
					position: relative;

					.btn {
						color: #F6F7FB;
						font-size: 28rpx;
						line-height: 40rpx;
						padding: 12rpx 32rpx;
						min-width: 160rpx;
						border-radius: 8rpx;
						text-align: center;
					}

					.point {
						position: absolute;
						top: -12rpx;
						right: -12rpx;
						color: #F6F7FB;
						font-size: 24rpx;
						line-height: 30rpx;
						text-align: center;
						min-width: 32rpx;
						height: 32rpx;
						border-radius: 16rpx;
						padding: 0 4rpx;
						border: 2rpx solid #F6F7FB;
						background: #FF0000;
					}
				}
			}
		}
	}
</style>